<template>
	<!-- form 查询表单 -->
	<el-form style="padding-bottom: 10px;"
		ref="selectFormRef"
		:model="music" 
		label-width="auto" 
		label-position="right" 
	>
		<el-row :gutter="20">
			<el-col :span="8">
				<el-form-item label="歌手" prop="music_author">
					<el-input v-model="music.music_author" placeholder="支持模糊查询" clearable/>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="歌名" prop="music_name">
					<el-input v-model="music.music_name" placeholder="支持模糊查询" clearable />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="类别" prop="music_type">
					<el-select v-model="music.music_type" placeholder="请选择" clearable>
						<el-option label="华语" value="1" />
						<el-option label="日韩" value="2" />
						<el-option label="欧美" value="3" />
						<el-option label="其他" value="4" />
						<el-option label="纯音乐" value="5" />
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>
		
		<el-row :gutter="20">
			<el-col :span="8">
				<el-form-item label="状态" prop="music_state">
					<el-select v-model="music.music_state" placeholder="请选择" clearable>
						<el-option label="待审核" value="3" />
						<el-option label="发布" value="1" />
						<el-option label="违规" value="2" />
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="发贴人" prop="music_user_name">
					<el-input v-model="music.music_user_name" placeholder="支持模糊查询" clearable />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="是否热门" prop="music_rm">
					<el-select v-model="music.music_rm" placeholder="请选择" clearable>
						<el-option label="热门" value="1" />
						<el-option label="常规" value="2" />
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>
		
		<el-row :gutter="20">
			<el-col :span="24">
				<el-button type="primary" @click="doList">查询</el-button>
				<el-button type="default" @click="doFormReset">重置</el-button>
				<el-button type="success" @click="showAddPage">新增</el-button>
				
			</el-col>
		</el-row>
	</el-form>
	
	
<!-- 	table 数据表格 -->
	<el-row>
		<el-col :span="24">
			<el-table :header-cell-style="{backgroundColor:'#F4F7FA',color:'gray'}"
				:data="tableData"
				stripe
				show-overflow-tooltip
			>
				<el-table-column type="index" width="50"/>
				<el-table-column prop="music_name" label="歌名" min-width="120px" />
				<el-table-column prop="music_author" label="歌手" sortable />
				<el-table-column prop="music_type" label="类型" sortable >
					<template #default="scope">
						<span v-if="scope.row.music_type === 4">其他</span>
						<span v-if="scope.row.music_type  === 1">华语</span>
						<span v-if="scope.row.music_type === 2">日韩</span>
						<span v-if="scope.row.music_type === 3">欧美</span>
						<span v-if="scope.row.music_type === 5">纯音乐</span>
					</template>
				</el-table-column>
				<el-table-column prop="music_state" label="状态" sortable>
				  <template #default="scope">
				    <span v-if="scope.row.music_state === 3">待审核</span>
				    <span v-if="scope.row.music_state  === 1">发布</span>
				    <span v-if="scope.row.music_state === 2">违规</span>
				  </template>
				</el-table-column>
				<el-table-column prop="music_rm" label="是否热门" min-width="80px">
					<template #default="scope">
					  <span v-if="scope.row.music_rm === 1">热门</span>
					  <span v-if="scope.row.music_rm  === 2">常规</span>
					</template>
				</el-table-column>
				<el-table-column prop="music_level" label="权限" sortable>
					<template #default="scope">
					  <span v-if="scope.row.music_level === 1">认证</span>
					  <span v-if="scope.row.music_level  === 2">公开</span>
					</template>
				</el-table-column>
				<el-table-column prop="music_user_name" label="发帖人" min-width="80px"/>
				<el-table-column prop="music_tu" label="点赞数" min-width="80px"/>
				<el-table-column prop="music_sc" label="收藏数" min-width="80px"/>
				<el-table-column label="更新&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;详情&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除" fixed="right" width="250">
					<template #default="scope">
						<el-button type="success" :icon="Edit" circle size="large" @click="Updatelevel(scope.row)"></el-button>
						<el-button type="primary" :icon="Expand" circle size="large" @click="showDetailPage(scope.row)"></el-button>
						<el-button type="danger" :icon="Delete" circle size="large" @click="doDelete(scope.row)"></el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination style="float:right"
			      v-model:current-page="page.pageNum"
			      v-model:page-size="page.pageSize"
			      :page-sizes="[5, 10, 20, 50]"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="page.total"
			      @change="doList"
			/>
		</el-col>
	</el-row>
	
	<!-- 详情页面 -->
	<detail-page ref="detailPageRef" @flushPage="doFlushPage" ></detail-page>
	<!-- 新增界面 -->
	<add-page ref="addPageRef" @flushPage="doFlushPage" ></add-page>
	
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import axios from 'axios';
import { ElMessage,FormInstance,ElMessageBox } from 'element-plus'
import DetailPage from './DetailPage.vue';
import AddPage from './AddPage.vue';
import {
	  Delete,
	  Edit,
	  Expand,
	} from '@element-plus/icons-vue'


//新增组件
const addPageRef = ref();
const showAddPage = ()=>{
	addPageRef.value.handleAddForm();
}

//详情组件
const detailPageRef = ref();
const showDetailPage = (obj)=>{
	detailPageRef.value.handleDetailData(obj);
}

//------------------------- from 表单 -----------------------------
// 查询条件
const music = ref({
	music_id:null,
	music_name:'', //歌名
	music_author:'',  //歌手
	music_type:null,  //类型
	music_state:null,  //状态
	music_rm:null, //是否热门
	music_user_name:'',  //发帖人
})
// 声明一个表单实例的ref
const selectFormRef = ref<FormInstance>()
// 重置表单的函数
const doFormReset = ()=>{
	// 重置表单字段
	selectFormRef.value.resetFields()
	// 重置页面状态
	doPageReset();
}

// -------------------------- table 表格----------------------------
// 表格数据
//测试数据
const tableData = ref([
	
]);

// 分页信息
const page = ref({
	pageNum: 1,
	pageSize: 5,
	pages:0,
	total:0
})

const doPageReset = ()=>{
	page.value.pageNum = 1;
	page.value.pageSize = 5;
}

//--------------------------- CRUD ---------------------------
// 查询
const doList = ()=>{
	axios({
		url:'/api/music/list',
		method:'GET',
		params: Object.assign({},music.value,{pageNum:page.value.pageNum, pageSize:page.value.pageSize})
	}).then(response => {
		// console.log(response.data)
		tableData.value = response.data.list;
		// 分页信息
		page.value.pages = response.data.pages;
		page.value.total = response.data.total;
	});
}
// 修改权限
const Updatelevel = (obj) => {
	if(obj.music_level ===1){
		obj.music_level = 2;
	}else{
		obj.music_level = 1;
	}	
  axios({
  	url:'/api/music',
  	method:'Put',
  	params:Object.assign({},obj)
  }).then( response => {
  	if(response.data === true){
  		ElMessage.success("操作成功！");
  		doFlushPage();
  	}else{
  		ElMessage.error("操作失败！");
  	}
  });
 
}

const doDelete = (music) => {
  ElMessageBox.confirm(
    '确定删除这首歌曲吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // 执行删除请求
      axios({
      		url:"/api/music/"+music.music_id,
      		method:'DELETE',
      	}).then(response => {
      		if(response.data === true){
      			doFlushPage();		// 删除成功，查询刷新表格数据
      			ElMessage.success('删除成功');
      		}else{
      			ElMessage.error('删除失败');
      		}
      	})
        .catch(error => {
          // 请求失败处理
          ElMessage({
            type: 'error',
            message: '删除失败: ' + error.message,
          });
        });
    })
    .catch(() => {
      // 用户点击了取消按钮
      ElMessage({
        type: 'info',
        message: '已取消删除',
      });
    });
};

// 删除
// const doDelete = (music)=>{
// 	axios({
// 		url:"/api/music/"+music.music_id,
// 		method:'DELETE',
// 	}).then(response => {
// 		if(response.data === true){
// 			doFlushPage();		// 删除成功，查询刷新表格数据
// 			ElMessage.success('删除成功');
// 		}else{
// 			ElMessage.error('删除失败');
// 		}
// 	});
// }

const doFlushPage = ()=>{
	doList();

}

onMounted(()=>{
	doList();
});

</script>

<style scoped>
</style>